<template>
	<view class="contain">
		<!-- #ifdef MP-WEIXIN-->
		<view class="ranking-tt-top">
			<view class="page-title-wrap">
			</view>
			<!-- <text @click="fanhui" class="iconfont icon-fanhui1 fanhui-icon"></text> -->
		</view>
		<!-- #endif -->
		<!-- #ifdef APP-PLUS-->
		<view class="ranking-tt-top" :style="'padding-top:' + tophight+'px;'">
			<view class="page-title-wrap">
			</view>
			<text @click="fanhui" class="iconfont icon-fanhui1 fanhui-icon"></text>
		</view>
		<!-- #endif -->
		<view class="ranking-all-wrap">
			<!-- 排行展示区 -->
			<view class="ranking-show">
				<view class="ranking-top">
					<view class="text1">
						排名
					</view>
					<view class="text2">
						用户名
					</view>
					<view class="text3">
						积分
					</view>
				</view>
				<scroll-view class="scroll-view" scroll-y="true" :style="'height:' + scrollH+'rpx;'">
					<view v-for="(item, index) in list" :key="index" class="ranking-show-item">
						<block v-if="index === 0">
							<image class="img" src="../../static/images/p1.jpg" mode=""></image>
							<text class="ranking-show-item-nickname font_28">{{item.realName}}</text>
							<text class="ranking-show-item-score font_30">{{item.totalPoint}}分</text>
						</block>
						<block v-else-if="index === 1">
							<image class="img" src="../../static/images/p2.jpg" mode=""></image>
							<text class="ranking-show-item-nickname font_28">{{item.realName}}</text>
							<text class="ranking-show-item-score font_30">{{item.totalPoint}}分</text>
						</block>
						<block v-else-if="index === 2">
							<image class="img" src="../../static/images/p3.jpg" mode=""></image>
							<text class="ranking-show-item-nickname font_28">{{item.realName}}</text>
							<text class="ranking-show-item-score font_30">{{item.totalPoint}}分</text>
						</block>
						<block v-else>
							<text class="ranking-index">{{parseInt(index)+1}}</text>
							<!-- <image v-if="isParty === false" :src="item.avatar" class="ranking-show-item-avatar"></image> -->
							<text class="ranking-show-item-nickname font_28">{{item.realName}}</text>
							<text class="ranking-show-item-score font_30">{{item.totalPoint}}分</text>
						</block>
					</view>
				</scroll-view>
			</view>
		</view>

	</view>
</template>

<script>
	import userApi from '@/api/user.js'
	export default {
		data() {
			return {
				tophight: 0,
				scrollH: 0,
				scrollHRankShow: 0,
				allRanking: [],
				departRanking: [],
				list: [],
				showType: 1, //默认部门排行
				firstThree: [], //前三
				isParty: false,
			}
		},
		onShow() {
			this.getRanking();
		},
		onShareTimeline: function(res) {},
		onShareAppMessage: function(res) {},
		onReady() {
			this.getRanking();

			let that = this;
			// #ifdef MP-WEIXIN
			that.tophight = uni.getMenuButtonBoundingClientRect().top + 8;
			// #endif
			uni.getSystemInfo({
				success: function(res) {
					console.log(res, '000')
					that.scrollHRankShow = res.windowHeight * 750 / res.windowWidth - 790;
					if (res.windowHeight < 700) {
						that.scrollH = res.windowHeight * 750 / res.windowWidth - parseInt(res.safeArea.top) -
							parseInt(res.safeArea.bottom) + 100;
					} else {
						that.scrollH = res.windowHeight * 750 / res.windowWidth - parseInt(res.safeArea.top) -
							parseInt(res.safeArea.bottom) + 100;
					}
				}
			});
		},
		methods: {
			getRanking() {
				let that = this;
				userApi.getuserRanking().then(res => {
					console.log(res, 999888)
					that.list = res.response; //默认部门排行
				})
			}
		}
	}
</script>

<style>
	page {
		height: 100%;
		overflow: hidden;
	}

	/* overflow: hidden; */
	.contain {
		height: 100%;
		background-image: url(https://m.qpic.cn/psc?/V10ZgwPU0kotmA/ruAMsa53pVQWN7FLK88i5gxFEFFDGsNfdQTHqiW4M740PUbd35JrFtWRCJjnWJJi6Mzvwj3tqoj7K6p2OGr6xA4k4HoXp.9yfBryyzb9sQI!/b&bo=kgLTBQAAAAABB2Y!&rf=viewer_4);
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.ranking-tt-top {
		height: 35%;
		background-position: bottom;
		background-size: 100%;
	}

	.ranking-all-wrap {
		width: 96%;
		margin: 0 auto;
	}

	.page-title-wrap {
		text-align: center;
		color: #FFFFFF;
		font-size: 32rpx;
		position: relative;
	}

	.fanhui-icon {
		position: absolute;
		left: 20rpx;
		top: 23rpx;
		font-size: 26px !important;
	}

	/* 冠军亚军季军展示台*/
	.rostrum {}

	.rostrum-item {

		width: 28%;
		height: 100%;
		text-align: center;
		margin-right: 30rpx;
		position: relative;
	}

	.rostrum-item:nth-child(1) {
		margin-left: 27rpx;
	}

	.rostrum-item::after {
		position: absolute;
		width: 34rpx;
		height: 34rpx;
		font-size: 24rpx;
		color: #FFFFFF;
		background-color: #ED292A;
		border-radius: 50%;
	}

	.rostrum-item:nth-child(3) {
		margin-right: 0;
	}

	.rostrum-item-avatar {
		display: inline-block;
		width: 94rpx;
		height: 94rpx;
		margin-top: 70rpx;
		border-radius: 50%;
		border: 2rpx solid #FF2A39;
	}

	.rostrum-item:nth-child(2) .rostrum-item-avatar {
		width: 130rpx !important;
		height: 130rpx !important;
		margin-top: 28rpx !important;
	}

	.ranking-score {
		display: inline-block;
		position: relative;
		top: -10rpx;
	}

	.ranking-nickname {
		width: 192rpx;
		height: 60rpx;
		line-height: 57rpx;
		position: relative;
		top: -18rpx;
		display: inline-block;
		background-size: 100%;
	}

	.ranking-score {
		color: #f5a005;
		position: relative;
		top: -30rpx;
		font-weight: bold;
		display: inline-block;
		height: 40rpx;
	}

	/* 排行切换按钮 */
	.ranking-btn-wrap {
		width: 80%;
		height: 60rpx;
		margin: 0 auto;
		line-height: 60rpx;
		position: relative;
	}

	.ranking-btn-item {
		position: absolute;
		width: 44%;
		text-align: center;
		color: #FF2A39;
		border-radius: 9rpx;
		letter-spacing: 2rpx;
		background-color: #fff;
	}

	.ranking-btn-left {
		left: 0;
	}

	.ranking-btn-right {
		right: 0;
	}

	.bgyelllow {
		background-color: #F9BA00 !important;
		color: #FFFFFF !important;
	}

	.ranking-show {
		width: 90%;
		margin: -35rpx auto 0;
		padding-top: 50rpx;
		position: relative;
		/* background: url("https://dangjian.sdwanyue.com/uniapp/ranking_white.png") no-repeat center; */
		background-size: 110% 110%;
		/* box-shadow: 0rpx 13px 0 rgba(0, 0, 0, 0.1) inset; */
		overflow: hidden;
	}

	.ranking-top {
		display: flex;
		align-items: center;
		height: 100rpx;
		line-height: 90rpx;
		padding-left: 30rpx;
	}

	.text2 {
		display: inline-block;
		width: 200rpx;
		margin-left: 70rpx;
		text-align: center;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.text1 {
		display: inline-block;
		margin-left: 26rpx;
	}

	.text3 {
		display: inline-block;
		margin-left: 118rpx;
	}

	.ranking-bottom-title {
		color: #F9BA00;
	}

	.ranking-bottom-title::before {
		content: '';
		left: 210rpx;
		top: 42rpx;
		position: absolute;
		width: 15rpx;
		height: 15rpx;
		font-size: 24rpx;
		color: #FFFFFF;
		background-color: #F9BA00;
		border-radius: 50%;
	}

	.ranking-bottom-title::after {
		content: '';
		right: 210rpx;
		top: 42rpx;
		position: absolute;
		width: 15rpx;
		height: 15rpx;
		font-size: 24rpx;
		color: #FFFFFF;
		background-color: #F9BA00;
		border-radius: 50%;
	}


	/* 白板排行区域 */
	.ranking-show-item {
		display: flex;
		align-items: center;
		height: 100rpx;
		line-height: 90rpx;
		padding-left: 30rpx;
		position: relative;
	}

	.ranking-index {
		display: inline-block;
		width: 100rpx;
		text-align: center;
	}

	.img {
		display: inline-block;
		width: 80rpx;
		height: 80rpx;
		margin-left: 18rpx;
		border-radius: 50%;
	}

	.ranking-show-item-nickname {
		display: inline-block;
		width: 200rpx;
		margin-left: 58rpx;
		text-align: center;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	.ranking-show-item-score {
		display: inline-block;
		width: 30%;
		text-align: right;
		position: absolute;
		right: 79rpx;
		color: #000;
	}
</style>